<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <!--调整缩放，方便移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客</title>

    <!--semantic ui 的 css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

    <!--自己定义的 css-->
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

</head>
<body>
    <!--导航-->
    <!--
        inverted : 颜色反转，加上就是黑色
        attached : 贴附，加上导航条就没有圆角
        m-padded-tb-mini : 自定义的 css ，表示导航栏菜单的上下内间距调整小一点
        segment : 一条类似导航栏的带子
        menu(1) : 参数决定那个 a标签 高亮
    -->
    <nav th:replace="_fragments :: menu(1)" class="ui inverted segment attached m-padded-tb-mini m-shadow-small">
        <!--放在 container 里可以让四周都留点空隙-->
        <div class="ui container">
            <!--
                secondary : 相当于一个背景色的样式
                stackable : 表示可堆叠的，在移动端时，里面的元素会有序堆在一起，一般与 menu ，grid 等连用
            -->
            <div class="ui inverted secondary stackable menu">
                <!--teal : 相当于一个字体颜色，绿色-->
                <h2 class="ui teal header item">Blog</h2>
                <!--在 ws 中可以快速写标签，例如： i.home.icon + tab键 = <i class="home icon"></i>-->
                <!--
                    item : 与上面的 menu 相对应
                    m-mobile-hide : 自定义的 css ，在移动端时隐藏
                    m-item : 没有任何样式作用，仅用于 js 作为选择器
                -->
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>

                <!--
                    right item : 表示靠右
                -->
                <div class="right item m-mobile-hide">
                    <!--
                        ui icon input : 表示一个带图标的输入框，可用于搜索框
                        transparent : 表示背景是透明的
                        inverted : 因为上面是黑色的，所以这里也要反转，要不然看不见
                    -->
                    <div class="ui icon inverted transparent input">
                        <input type="text" placeholder="搜索...">
                        <!--
                            link : 表示可以点击跳转
                        -->
                        <i class="search link icon"></i>
                    </div>
                </div>

            </div>
        </div>

        <!--用于移动端折叠导航栏的按钮-->
        <!--
            m-right-top : 自定义的 css，将元素至于右上角
            m-mobile-show : 自定义的 css ，在移动端时显示，在通常情况下隐藏
            menu toggle : 没有任何样式作用，仅用于 js 作为选择器
        -->
        <a href="#" class="ui black menu toggle icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>

    </nav>

    <!--中间内容-->
    <!--
        m-container : 自定义css，使其比原定的 container 窄
    -->
    <div class="m-container m-padded-tb-big">
        <!--
            container : 使里面的内容有响应式效果
        -->
        <div class="ui container">
            <div class="ui stackable grid">
                <!--左边博客列表-->
                <div class="eleven wide column">
                    <!--header-->
                    <!--
                        top attached ： 附加，以此为顶部，和下面的元素粘连在一起
                    -->
                    <div class="ui top attached segment">
                        <!--
                            middle aligned : 垂直方向居中
                        -->
                        <div class="ui middle aligned two column grid">
                            <div class="column">
                                <h3 class="ui teal header">博客</h3>
                            </div>
                            <!--
                                right aligned : 靠右对齐
                            -->
                            <div class="right aligned column">
                                共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${page.totalElements}">14</h2> 篇
                            </div>
                        </div>
                    </div>
                    <!--end header-->

                    <!--content-->
                    <!--
                        attached ： 附加，和上面的元素粘连在一起，用于中间
                    -->
                    <div class="ui attached segment">

                        <!--
                            因为版本的问题，下面 <div class="ui vertical segment "> 中，就算加了 padded 也不能像视频中那样，加大四周内边距
                            只会加大上下内边距;（详见该 css 文件 18650 - 18664 行）
                            所以这里使用自定义的css（m-padded-big）来实现该样式
                        -->
                        <!--一项-->
                        <div class="ui vertical segment m-padded-big m-padded-tb-large m-mobile-lr-clear">
                            <!--
                                mobile reversed : 表示在移动端 grid 中的列顺序会反过来
                            -->
                            <div class="ui middle aligned mobile reversed stackable grid" th:each="blog : ${page.content}">
                                <div class="eleven wide column">
                                    <h3 class="ui header"><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">标题标题标题</a></h3>
                                    <!--
                                        |{blog.description}...| : 用 | 包裹的表示将里面的变量和字符串直接拼接
                                    -->
                                    <p class="m-text" th:text="|${blog.description}...|">段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容</p>
                                    <div class="ui middle aligned stackable grid">
                                        <div class="eleven wide column">
                                            <!--
                                                horizontal : 将列表（list）横置
                                            -->
                                            <div class="ui mini horizontal link list">
                                                <div class="item">
                                                    <!--
                                                        avatar : 头像图片样式
                                                    -->
                                                    <img src="https://picsum.photos/id/1/100/100" th:src="@{${blog.user.avatar}}" class="ui avatar image">
                                                    <!--
                                                        content : 图片后面的文字内容
                                                    -->
                                                    <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">名字</a></div>
                                                </div>
                                                <div class="item">
                                                    <!--
                                                        #dates.format(blog.updateTime, 'yyyy-MM-dd') ： thymeleaf 的内置函数，将日期时间格式化
                                                    -->
                                                    <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2017-10-01</span>
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i><span th:text="${blog.views}">2341</span>
                                                </div>
                                            </div>
                                        </div>
                                        <!--文章标签-->
                                        <div class="right aligned five wide column">
                                            <!--
                                                label : 标签样式，像实心按钮一样
                                            -->
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
                                        </div>
                                    </div>
                                </div>
                                <!--放带有链接的图片-->
                                <div class="five wide column">
                                    <!--
                                        target="_blank" : 表示新打开一个标签
                                    -->
                                    <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                                        <!--
                                            占位图片使用方法：
                                            https://picsum.photos/id/[图片id]/[宽度]/[高度]
                                        -->
                                        <img src="https://picsum.photos/id/1/800/450" th:src="@{${blog.firstPicture}}" class="ui rounded image">
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!--end content-->

                    <!--footer-->
                    <div class="ui bottom attached segment" th:if="${page.totalPages} > 1">
                        <div class="ui middle aligned two column grid">
                            <div class="column">
                                <!--
                                    button : 把该 a标签 作为一个按钮
                                    basic : 按钮变为空心样式
                                    mini : 将按钮变小
                                -->
                                <a href="#" class="ui mini teal basic button" th:href="@{/(page=${page.number} - 1)}" th:unless="${page.first}">上一页</a>
                            </div>
                            <div class="right aligned column">
                                <a href="#" class="ui mini teal basic button" th:href="@{/(page=${page.number} + 1)}" th:unless="${page.last}">下一页</a>
                            </div>
                        </div>
                    </div>
                    <!--end footer-->
                </div>
                <!--右边的卡片-->
                <div class="five wide column">
                    <!--
                        segments : 多个 segment
                    -->
                    <!--分类的卡片-->
                    <div class="ui segments">

                        <!--header-->
                        <div class="ui secondary segment">
                            <!--
                                two column grid : 只有两列的 grid
                            -->
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="idea icon"></i>分类
                                </div>
                                <div class="right aligned column">
                                    <a href="#" target="_blank">more<i class="angle double right icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <!--end header-->
                        <!--content-->
                        <!--
                            teal : 在 segment 中加上颜色，会在两个 segment 中间加一根有颜色的线
                        -->
                        <div class="ui teal segment">
                            <!--
                                fluid : 填充满整个框
                                menu : 比 link list 多一个边框，看起来更像按钮
                            -->
                            <div class="ui fluid vertical menu">
                                <a href="#" class="item" th:each="type : ${types}">
                                    <span th:text="${type.name}">学习日志</span>
                                    <!--
                                        left pointing : 会在标签的左边突出一个小三角，像一个对话气泡
                                        #arrays.length(type.blogs) ： thymeleaf 的内置函数，获取数组长度
                                    -->
                                    <div class="ui teal basic left pointing label" th:text="${#arrays.length(type.blogs)}">13</div>
                                </a>
                            </div>

                        </div>
                        <!--end content-->
                    </div>

                    <!--标签的卡片-->
                    <div class="ui segments m-margin-tb-large">
                        <!--header-->
                        <div class="ui secondary segment">
                            <!--
                                two column grid : 只有两列的 grid
                            -->
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="tags icon"></i>标签
                                </div>
                                <div class="right aligned column">
                                    <a href="#" target="_blank">more<i class="angle double right icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <!--end header-->

                        <!--content-->
                        <div class="ui teal segment">
                            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny" th:each="tag : ${tags}">
                                <span th:text="${tag.name}">方法论</span>
                                <!--
                                    detail : 用于文字后面的描述
                                -->
                                <div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
                            </a>
                        </div>
                        <!--end content-->
                    </div>

                    <!--最新推荐的卡片-->
                    <div class="ui segments m-margin-tb-large">
                        <!--header-->
                        <div class="ui secondary segment">
                            <i class="bookmark icon"></i>最新推荐

                        </div>
                        <!--end header-->

                        <!--content-->
                        <div class="ui segment" th:each="blog : ${recommendBlogs}">
                            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black m-text-thin" th:text="${blog.title}">用户故事</a>
                        </div>
                        <!--end content-->
                    </div>

                    <!--二维码的卡片-->
                    <!--
                        horizontal divider header : 横向分割线中间可写标题
                    -->
                    <h4 class="ui horizontal divider header m-margin-tb-large">扫码关注我</h4>
                    <!--
                        centered : 居中
                        card ： 一个方框
                    -->
                    <div class="ui centered card" style="width: 11em">
                        <img src="../static/images/QRcode.png" th:src="@{/images/QRcode.png}" class="ui rounded image">
                    </div>
                </div>
            </div>
        </div>

    </div>

    <br>
    <br>

    <!--底部 footer-->
    <!--
        vertical : 垂直，加上没有圆角
        m-padded-tb-massive : 自定义 css，使整个 footer 的内间距变大
    -->
    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
        <!--
            center aligned : 里面所有元素居中
        -->
        <div class="ui center aligned container">
            <!--
                grid : 类似于 bootstrap 中的 row，bootstrap 中 把一行分成 12 列，这里分成 16 列
                divided : 每列之间加上分割线
                inverted : 因为背景是反转色，所以这里也反转
            -->
            <div class="ui inverted divided stackable grid">
                <!--二维码图片-->
                <!--
                    wide : 宽度填满
                -->
                <div class="three wide column">
                    <!--把图片放在 list 里，使图片能居中-->
                    <div class="ui inverted link list">
                        <div class="item">
                            <!--
                                rounded : 圆角的
                            -->
                            <img src="../static/images/QRcode.png" th:src="@{/images/QRcode.png}" class="ui rounded image" style="width: 110px">
                        </div>
                    </div>
                </div>
                <!---->
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <!--
                        list : 里面的元素呈列表样式
                    -->
                    <div class="ui inverted link list">
                        <!--
                            item : 与上面的 list 相对应
                        -->
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                    <!--
                        list : 里面的元素呈列表样式
                    -->
                    <div class="ui inverted link list">
                        <!--
                            item : 与上面的 list 相对应
                        -->
                        <a href="#" class="item">Email: dfasdog@qq.com</a>
                        <a href="#" class="item">QQ: 13355767653</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <!--加上自定义样式-->
                    <h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>
                    <!--加上自定义样式-->
                    <p class="m-text-thin m-text-spaced m-opacity-mini">一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话</p>
                </div>
            </div>
            <!--分割线-->
            <!--
                divider : 与上面的 divided 区别开
            -->
            <div class="ui inverted section divider"></div>
            <!--加上自定义样式-->
            <p class="m-text-thin m-text-spaced m-opacity-tiny">版权内容版权内容版权内容版权内容版权内容</p>
        </div>
    </footer>

<!--下面这种注释方法，能使该标签在 thymeleaf 有用，在 html 中没用-->
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
    <!--jquery 的 js-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>

    <!--semantic ui 的 js-->
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->


<!--自定义的 js-->
<script>
    $('.menu.toggle').click(function () {
        // 如果类中有 m-mobile-hide ，则去掉，否则加上
        $('.m-item').toggleClass('m-mobile-hide');
    });
</script>
</body>
</html>